<template>
    <div class="case">
        <Header colors="Case"></Header>
        <div class="big-image">
            <img src="../../assets/img/baner-3.png" alt="">
        </div>
        <div class="title">
            <ul>
                <li @click="switchs('Brand')" :class="switch_style">品牌宣传<br/>菩提之光</li>
                <li @click="switchs('Anime')" :class="switch_style_1">移动应用推广<br/>腾讯动漫</li>
                <li @click="switchs('Loan')" :class="switch_style_2">贷款APP推广</li>
                <li @click="switchs('MobileApplications')" :class="switch_style_3">移动应用推广</li>
                <li @click="switchs('Sem')" :class="switch_style_4">SEO、SEM<br/>优化</li>
                <li @click="switchs('NewMedia')" :class="switch_style_5">新媒体营销</li>
                <li @click="switchs('NewsMarketing')" :class="switch_style_6">新闻营销</li>
            </ul>
        </div>
        <component :is="selected_case"></component>
        <Footer/>
    </div>
</template>
<script>
import Header from '../common/components/Header'
import Footer from '../common/components/Footer'
import Brand from './components/Brand'
import Anime from './components/Anime'
import Loan from './components/Loan'
import MobileApplications from './components/MobileApplications'
import Sem from './components/Sem'
import NewMedia from './components/NewMedia'
import NewsMarketing from './components/NewsMarketing'
export default {
    name: 'Case',
    data () {
        return {
            selected_case: 'Brand'
        }
    },
    components: {
        Header,
        Footer,
        Brand,
        Anime,
        Loan,
        MobileApplications,
        Sem,
        NewMedia,
        NewsMarketing
    },
    methods: {
        switchs (s) {
           this.selected_case = s
        }
    },
    computed: {
        switch_style () {
            if(this.selected_case == 'Brand') {
                return {
                    active: true
                }
            }
        },
        switch_style_1 () {
            if(this.selected_case == 'Anime') {
                return {
                    active: true
                }
            }
        },
        switch_style_2 () {
            if(this.selected_case == 'Loan') {
                return {
                    active: true
                }
            }
        },
        switch_style_3 () {
            if(this.selected_case == 'MobileApplications') {
                return {
                    active: true
                }
            }
        },
        switch_style_4 () {
            if(this.selected_case == 'Sem') {
                return {
                    active: true
                }
            }
        },
        switch_style_5 () {
            if(this.selected_case == 'NewMedia') {
                return {
                    active: true
                }
            }
        },
        switch_style_6 () {
            if(this.selected_case == 'NewsMarketing') {
                return {
                    active: true
                }
            }
        }
    }
}
</script>
<style scoped>
.case {
    width: 100%;
}
.case .big-image {
    height: 300px;
}
.case .big-image img {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
}
.case .title {
    margin: 0 auto;
    width: 670px;
    margin-top: 100px;
    height: 200px;
}
.case .title ul li {
    float: left;
    width: 150px;
    height: 80px;
    font-size: 22px; /*px*/
    color: #05173b;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    text-align: center;
    margin-left: 23px;
    box-shadow: 8px 0px 10px 1px #e0e0e0; /*no*/
    border-radius: 30px;
}
.case .title ul li:nth-child(1),.case .title ul li:nth-child(5) {
    margin-left: 0;
}
.case .title ul li:nth-child(5),.case .title ul li:nth-child(6),.case .title ul li:nth-child(7) {
    margin-top: .4rem;
}
.case .title ul .active {
    background-color: #1e90ff;
    color: #fff;
}
@media screen and (max-width: 640px) {
.case .title {
    width: 700px;
}
.case .title ul li {
    width: 156px;
     margin-left: 25px;
}    
}
</style>
